<template>
  <div class="register" ref="register">
    <van-form>
      <van-field v-model="form.tel" type="tel" placeholder="请输入手机号" name="pattern" :error-message="errorMessage" :rules="[{ pattern }]" />
      <!-- <span>请正确输入11位手机号</span> -->
      <van-field v-model="form.password" type="password" placeholder="请输入密码" :error-message="errorPassword" />
      <!-- <span>请输入密码</span> -->
      <van-field v-model="form.password2" type="password" placeholder="请确认密码" :error-message="errorPassword2" />
      <!-- <span>密码不一致</span> -->
      <div class="btn" @click="Register(form)">注册</div>
      <div class="btn" @click="$router.push('/')" style="margin-top:10px;">登录</div>
    </van-form>

    <!-- 勾选协议 -->
    <!-- <div class="agreement">
      <van-checkbox-group v-model="result">
        <van-checkbox name="value">已阅读并同意<a href="#">《租车协议》</a></van-checkbox>
      </van-checkbox-group>
    </div> -->
  </div>
</template>

<script>
import { getAllUserList, getUserList, setUserList, setRole } from '../api';
import { formatDateTime } from '../components/Msite/Model/time';
export default {
  data() {
    return {
      form: {
        tel: "",
        password: "",
        password2: ""
      },
      value: '',
      result: [],
      userData: [],
      errorMessage: '', // 手机号错误的提示信息
      errorPassword: '', // 密码错误的提示信息
      errorPassword2: '', // 确认密码错误的提示信息
      pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    };
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    fun() {
      console.log('我是注册的方法')
    },
    // 正则验证手机号
    validate() {
      this.Register(this.form.tel);
    },
    getHeight() {
      this.$refs.register.style.height =
        document.documentElement.clientHeight + "px";
    },
    // 注册
    Register(params) {
      if(params.tel !== '') {
        getUserList({
          "username": params.tel
        }).then(res => {
          if(res.data.data.length !== 0 && params.tel === res.data.data[0].username) {
            this.errorMessage = '该手机号已经注册过了';
          }else {
            // 验证手机号格式
            this.errorMessage = '';
            if(this.pattern.test(params.tel)) {
              if(params.password === '') {
                this.errorPassword = '请输入密码';
              }else if(params.password !== '' && params.password2 === params.password) {
                console.log('密码加密',this.$md5(params.password));
                this.errorPassword2 = '';
                let time = formatDateTime(new Date().getTime());
                setUserList({ // 将用户数据插入用户表
                  "username": params.tel,
                  "password": this.$md5(params.password),
                  "time": time
                }).then(res2 => {
                  getAllUserList().then(({data}) => {
                    getUserList({
                      "username": data.data[data.data.length-1].username
                    }).then(({data}) => {
                      console.log('查询到的用户', data.data[0].id);
                      setRole({
                        "user_id": data.data[0].id,
                        "role_id": 2
                      }).then(({data}) => {
                        console.log('插入成功', data);
                      })
                    })
                  })
                  this.$router.push('/'); // 注册成功后跳回到登录页面
                })
              }else {
                this.errorPassword = '';
                this.errorPassword2 = '前后密码不一致';
              }
              return false;
            }
            this.errorMessage = '请正确填写手机号'
          }
        })
      }else {
        this.errorMessage = '账号不能为空'
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 0;
  background-color: rgb(236, 236, 236);
  padding-top: 100px;
  box-sizing: border-box;
  .van-field {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 10px;
  }
  .btn {
    width: 200px;
    height: $height;
    line-height: $height;
    text-align: center;
    color: #fff;
    background-color: $color;
    border-radius: 20px;
    margin: 0 auto;
  }

  .agreement {
    width: 90%;
    position: absolute;
    bottom: 20px;
    left: 15px;
    box-sizing: border-box;
  }
}
</style>